<template>
  <div class="app-container">
    <div class="filter">
      <el-form :inline="true" class="filter-container">
        <el-form-item label="报表类型" >
          <el-select v-model="query.fileType" placeholder="请选择报表类型"  style="width:210px" clearable>
            <el-option label="预缴手续费表" value="PFR"></el-option>
            <el-option label="已核对的预缴手续费报表" value="C_PFR"></el-option>
            <el-option label="退还手续费报表" value="RFR"></el-option>
            <el-option label="待导入的机构信息报表" value="OR"></el-option>
            <el-option label="已导入的机构信息报表" value="C_OR"></el-option>
            <el-option label="待导入的云账户企业会员信息" value="CUR"></el-option>
            <el-option label="已导入的云账户企会员信息" value="C_UR"></el-option>
            <el-option label="交保回执文件" value="RD"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker style="width:140px"
            v-model="query.startDate"
            type="date"
            placeholder="选择开始日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-date-picker style="width:140px"
            v-model="query.endDate"
            type="date"
            placeholder="选择结束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              title="搜索"
              @click="search">
            </el-button>
        </el-form-item>
      </el-form>
      <div class="fr clearfix buttonBox new-refrech">
        <el-button
            class="btn-size fl"
            icon="el-icon-refresh"
            title="刷新"
            @click="refresh">
        </el-button>
      </div>
    </div>
    <el-table
      :data="tableData" stripe  
      style="width: 100%" v-loading="loading" class="table-out-border">
      <el-table-column align="center"
        prop="countDate"
        label="日期">
        <template slot-scope="scope">{{scope.row.countDate|transformTimeF}}</template>
      </el-table-column>
      <el-table-column align="center" prop="fileType" label="产品编号"></el-table-column>
      <el-table-column align="center" prop="fileType" label="平台机构号"></el-table-column>
      <el-table-column align="center" prop="fileType" label="当日保证金借出笔数"></el-table-column>
      <el-table-column align="center" prop="fileType" label="当日保证金借出总额"></el-table-column>
      <el-table-column align="center" prop="fileType" label="当日预收手续费总额"></el-table-column>
      <el-table-column align="center" prop="fileType" label="当日保证金归还笔数"></el-table-column>
      <el-table-column align="center" prop="fileType" label="当日保证金归还总额"></el-table-column>
      <el-table-column align="center" prop="fileType" label="当日实收手续费总额"></el-table-column>
      <el-table-column align="center" prop="fileType" label="保证金占用总额"></el-table-column>
    </el-table>
   
    <div class="pagination-container pull-right">
      <el-pagination 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" 
        :current-page="query.page" 
        :page-size="query.pageSize" 
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper" 
        :total="totalCount">
      </el-pagination>
    </div>
   </div>

</template>

<script>
import { mapGetters } from 'vuex'
import { listBalanceExcel } from '@/api/errorManage'
export default {
  data() {
    return {
      loading: true,
      listData: [],
      query: {
        stardtDate: '',
        endDate: '',
        fileType:'',
        page: 1,
        pageSize: 10
      },
      totalCount: '1',
      editFlag: false,
      tableData: [],
      multipleSelection: []
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  filters: {
    isFilteType(item) {
      const itemMap = {
        'PFR': '预缴手续费报表',
        'C_PFR': '已核对的预缴手续费报表',
        'RFR': '退还手续费报表',
        'OR': '待导入的机构信息报表',
        'C_OR': '已导入的机构信息报表',
        'CUR': '待导入的云账户企业会员信息',
        'C_UR': '已导入的云账户企会员信息',
        'RD': '交保回执文件'
      }
      return itemMap[item]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      listBalanceExcel({}, this.query).then(res => {
        this.loading = false
        this.tableData = res.data.records
        this.totalCount = res.data.totalCount
      }).catch(error => {
        this.loading = false
        console.log('error=' + error)
      })
    },
    // 修改每页条数
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getData()
    },
    // 切换页面
    handleCurrentChange(val) {
      this.query.page = val
      this.getData()
    },
    search() {
      this.query.page = 1
      this.getData()
    },
    refresh() { // 刷新按钮点击事件
      this.query.page = 1
      this.getData()
    },
    downLoad(id) {
      const url = '/api/allinpay.bidding.aggregation/downloadFile?fileId=' + id + '&token=' + this.token
      window.open(url)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-form-item{
  margin-bottom: 10px;
  .el-form-item{
    margin-bottom:0
  }
  label{
    width:50%;
  }
}
.title{
  font-size: 22px;
}
.btn-rows {
  text-align: center;
  padding-top:20px;
}
</style>


